<!--  -->
<template>
  <div class="classifyScroll">
    <div style="display: flex">
      <div class="oneNav">
        <!-- vant侧边导航 -->
        <van-sidebar
          style="
            height: 100vh;
            white-space: nowrap;
            overflow-y: scroll;
            padding-bottom: 50px;
          "
          v-model="activeKey"
        >
          <van-sidebar-item
            v-for="(item, key) in classfiyList"
            :title="item.title"
            :key="key"
            @click="oneNav(item.maitKey)"
          />
        </van-sidebar>
      </div>
      <div class="twoNav">
        <!-- vant宫格 -->
        <van-grid :gutter="10" column-num="3" :border="false" icon-size="60px">
          <van-grid-item
            v-for="(item, index, key) in classfiyGathers"
            :key="key"
            :icon="item.image"
            :text="item.title"
            @click="onList(item.title)"
          />
        </van-grid>
        <!-- <div class="three">
          <van-tabs type="card" @click="onClick" color="#ff0378">
            <van-tab title="综合" name="new">
              <van-grid :border="false" :column-num="2">
                <van-grid-item
                  v-for="(item, key) in synthesize"
                  :key="key"
                  @click="toDetails(item.tradeItemId)"
                >
                  <van-image :src="item.img" class="threeImg" />
                  <div class="newText">{{ item.title }}</div>
                  <div class="prive-footer">
                    <div class="prive">&yen;{{ item.orgPrice }}</div>
                    <div></div>
                    <div></div>
                    <div>{{ item.cfav }} <van-icon name="star-o" /></div>
                  </div>
                </van-grid-item>
              </van-grid>
            </van-tab>
            <van-tab title="销量" name="sell">
              <van-grid :border="false" :column-num="2">
                <van-grid-item v-for="(item, key) in synthesize" :key="key">
                  <van-image :src="item.img" />
                  <div class="newText">{{ item.title }}</div>
                  <div class="prive-footer">
                    <div class="prive">&yen;{{ item.orgPrice }}</div>
                    <div></div>
                    <div></div>
                    <div>{{ item.cfav }} <van-icon name="star-o" /></div>
                  </div>
                </van-grid-item>
              </van-grid>
            </van-tab>
            <van-tab title="新品" name="pop">
              <van-grid :border="false" :column-num="2">
                <van-grid-item v-for="(item, key) in synthesize" :key="key">
                  <van-image :src="item.img" />
                  <div class="newText">{{ item.title }}</div>
                  <div class="prive-footer">
                    <div class="prive">&yen;{{ item.orgPrice }}</div>
                    <div></div>
                    <div></div>
                    <div>{{ item.cfav }} <van-icon name="star-o" /></div>
                  </div>
                </van-grid-item>
              </van-grid>
            </van-tab>
          </van-tabs>
        </div> -->
      </div>
    </div>
  </div>
</template>


<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import { Toast } from "vant";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      classfiyList: {},
      classfiyGathers: {},
      oneClass: [], //一级分类数据
      activeKey: 0,
      twoClass: [],
      synthesize: {},
      clothes: ""
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    list () {
      this.$axios.get("/category.json").then((res) => {
        this.classfiyList = res.data["117330"].list
      })
    },
    oneNav (maitKey) {
      localStorage.setItem("maitKey", maitKey)
      this.go()
    },
    go () {
      let maitKey = localStorage.getItem("maitKey")
      // console.log(maitKey)
      this.$axios.get('/category/getSub?', {
        params: { pid: maitKey }
      }).then(res => {
        // console.log(res.data.list)
        this.classfiyGathers = res.data.list
      })
    },
    onClick (name, title) {
      localStorage.setItem("tabName", name)
      this.sales()
    },
    // sales () {
    //   let maitKey = localStorage.getItem("maitKey")
    //   let tabName = localStorage.getItem("tabName")
    //   this.$axios.get('/category/miniWall', {
    //     fcid: maitKey,
    //     page: 2,
    //     sort: tabName
    //   }).then((res) => {
    //     // console.log(res.data.result.wall.docs)
    //     this.synthesize = res.data.result.wall.docs
    //   })
    // },
    onList (val) {
      this.$router.push({ name: "SearchResult", params: { val: val } })
    },
    toDetails (tradeItemId) {
      // console.log(tradeItemId)
      this.$router.push({
        name: "productdetails",
        params: { tradeItemId: tradeItemId },
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    localStorage.setItem("maitKey", 3627)
    this.list()
    this.go()
    // this.sales()
    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded"
      location.reload()
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.classfiy-list {
  height: 750px;
  overflow: scroll;
}
.twoNav {
  overflow-y: scroll;
  height: 100vh;
}
.three {
  .newText {
    margin-top: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .prive-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 5px;
    width: 100%;

    .prive {
      font-size: 15px;
      font-weight: bold;
      color: #ff0378;
    }
  }
}
</style>
<style>
.van-sidebar {
}

.van-sidebar-item--select::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 16px;
  background-color: #ff0378;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "";
}
.van-tabs--card > .van-tabs__wrap {
  margin-left: -15px;
  width: 315px;
  height: 30px;
}
.van-tabs__nav .van-tabs__nav--card {
  border: 1px solid #000;
}
</style>